<template>
  <view>
    <section
      v-for="(item, index) in listData"
      :key="index"
      class="section about-operation" style="padding-bottom: 10px;" @click.stop="goToDetail(item)">
      <!-- TODO数据绑定，点击跳转 -->
      <view class="section-title">
        <text class="title">
          {{ '询价轮次 ' + item.rounds }}
        </text>
        {{ getRoundStatus(item.status) }}
      </view>
      <view class="section-body">
        <template>
          <view class="info-item-label">
            {{ '本轮询价时间' }}
          </view>
          <view class="info-item-value">
            {{ item.fbTime + '  -  ' + item.bjJzTime }}
          </view>
        </template>
        <template>
          <view class="info-item-label">
            {{ '本轮实际完结日期' }}
          </view>
          <view class="info-item-value">
            {{ item.bjActEndTime || '--' }}
          </view>
        </template>
        <template>
          <view class="info-item-label">
            {{ '备注' }}
          </view>
          <view class="info-item-value">
            {{ item.remark }}
          </view>
        </template>
        <template>
          <view class="info-item-label">
            {{ '完结人' }}
          </view>
          <view class="info-item-value">
            {{ item.finishUserName }}
          </view>
        </template>
      </view>
    </section>
  </view>
</template>

<script>

  import state from '@/mixins/state.js'
  import {queryZbNum, srmXjOrderLcList} from 'API/inqueryMessage'
  export default {
    name: 'QuotaRound',
    components: {
    },
    mixins: [state],
    props: {
      detailId: {
        type: [String, Number],
        default: null,
        required: true
      },
      srmXjOrderUserId: {
        type: [String, Number],
        default: null,
        required: true
      },
      gysOrderState: {
        type: Number,
        default: null,
      },
    },
    data() {
      return {
        listData: [],
        roundStatus: [
          '未开始',
          '报价中',
          '已结束',
          '已开标'
        ],
      }
    },
    computed: {
    },
    watch: {
    },
    created() {
      this.getList()
    },
    methods: {
      getRoundStatus(status) {
        return this.roundStatus[status]
      },
      getList() {
        // TODO 数据
        srmXjOrderLcList({
          page: 1,
          limit: 1000,
          objMap: {
            orderId: this.detailId
          }
        }).then(res => {
          this.listData = []
          if (res.data != undefined && res.data instanceof Array) {
            res.data.forEach((item, index) => {
              this.listData.push(item)
            })
          }
        })
        this.listData = []
      },
      goToDetail(item) {
        console.log('click detail', item)
        this.$Router.navigateTo({
          url: '/pages/inqueryDetail/components/detailSection/quotaRoundDetail',
          query: {
            id: item.id,
            objId: this.detailId,
            status: item.status,
            gysOrderState: this.gysOrderState,
            srmXjOrderById: this.srmXjOrderUserId
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
@import '../../style/style.scss';
.info-item-label {
    font-size: 26rpx;
    color: $light;
    padding: 15rpx 0;
  }
  .info-item-value {
    width: 100%;
    min-height: 50rpx;
    font-size: 30rpx;
    color: $dark;
	}
	
  .about-operation {
	  margin: 0px 10px 10px 10px;
    background-color: white;

    .section-body {
      padding: 0 30rpx;
      .list {
        margin-top: 36rpx;
        .list-item {
          display: flex;
          .time {
            flex-direction: column;
            @include left;
            .date {
              font-size: 26rpx;
              color: $dark;
            }
            .now {
              font-size: 24rpx;
              color: $gray;
            }
          }

          .icon-box{
            position: relative;
            display: flex;
            .icon {
              z-index: 2;
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              border: 5rpx solid #d5d5d5;
              margin: 14rpx 24rpx 0;
            }
            &::before {
              position: absolute;
              z-index: 1;
              top: 30rpx;
              left: 50%;
              transform: translateX(-50%);
              content: '';
              width: 1rpx;
              height: calc(100% - 16rpx);
              border-left: 1rpx dotted #d8d8d8;
              display: block;
            }
          }

          .content {
            flex: 1;
            padding-bottom: 36rpx;
						overflow: hidden;
            .user-info {
              font-size: 30rpx;
              @include left;
							.avatar {
								width: 70rpx;
								height: 70rpx;
							}
              .username {
                flex: 1;
                margin-left: 15rpx;
              }
              .time {
                font-size: 26rpx;
                color: #999;
              }
            }
            .option {
              font-size: 26rpx;
              color: $gray;
              display: flex;
              flex-wrap: wrap;
              padding-left: 80rpx;
              .option-title {}
              .option-text {
                flex: 1;
								word-break: break-all;
								overflow: hidden;
              }
            }
          }

          &:last-child {
            .icon-box {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
</style>
